<template>
  <div>
    <myhead title="小组">
      <template #right>
        <img
          class="rightImg"
          src="../../assets/images/ic_chat_green.png"
          alt=""
        />
      </template>
      <template #left>
        <img
          class="leftImg"
          src="../../assets/images/ic_actionbar_search_icon.png"
          alt=""
        />
      </template>
    </myhead>
    <groupitem :arr="newarr">
      <div>
        <h1>新组速报</h1>
        <div class="xiz" v-for="(item, index) in newarr" :key="index">
          <div class="box">
            <img :src="item.img_url" alt="" />
            <span>{{ item.group_name }}</span
            ><span class="rne">{{ item.group_member }}</span>
          </div>
          <p>{{ item.topic_title }}</p>
        </div>
        <p class="gdd">更多相关小组</p>
      </div>
    </groupitem>
    <groupitem :arr="itemarr">
      <div>
        <h1>热门小组</h1>
        <div class="xiz" v-for="(item, index) in itemarr" :key="index">
          <div class="box">
            <img :src="item.img_url" alt="" />
            <span>{{ item.group_name }}</span
            ><span class="rne">{{ item.group_member }}</span>
          </div>
          <p>{{ item.topic_title }}</p>
        </div>
        <p class="gdd">更多相关小组</p>
      </div>
    </groupitem>
    <groupitem :arr="nitarr">
      <div>
        <h1>影视</h1>
        <div class="xiz" v-for="(item, index) in nitarr" :key="index">
          <div class="box">
            <img :src="item.img_url" alt="" />
            <span>{{ item.group_name }}</span
            ><span class="rne">{{ item.group_member }}</span>
          </div>
          <p>{{ item.topic_title }}</p>
        </div>
        <p class="gdd">更多相关小组</p>
      </div>
    </groupitem>
  </div>
</template>

<script>
import myhead from "../../components/Header/head";
import groupitem from "./groupitem";
export default {
  data() {
    return {
      newarr: [],
      itemarr: [],
      nitarr: [],
    };
  },
  mounted() {
    this.$axios.get("../../../static/data/groupData.json").then((res) => {
      console.log(res.data.group[0].group_list);
      this.newarr = res.data.group[0].group_list;
    });
    this.$axios.get("../../../static/data/groupData.json").then((res) => {
      console.log(res.data.group[1].group_list);
      this.itemarr = res.data.group[1].group_list;
    });
    this.$axios.get("../../../static/data/groupData.json").then((res) => {
      console.log(res.data.group[2].group_list);
      this.nitarr = res.data.group[2].group_list;
    });
  },
  components: { myhead, groupitem },
};
</script>

<style>
</style>